<template>
  <div class="lb-dynamic-ordinary">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="dynamicForm"
        :rules="dynamicFormRules"
        ref="dynamicForm"
        label-width="140px"
        class="dynamic-form"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="dynamicForm.title"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择分类" prop="cate_id">
          <el-select
            v-model="dynamicForm.cate_id"
            filterable
            clearable
            placeholder="请选择分类"
          >
            <el-option
              v-for="item in cateList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="发布人" prop="type">
          <el-radio-group
            @change="value = []"
            :disabled="dynamicForm.id"
            v-model="dyn_type"
          >
            <el-radio :label="1">公司</el-radio>
            <el-radio :label="2">员工</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >可选择公司或员工，支持多选，默认不选择则为选择全部公司及员工</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label prop>
          <el-select
            :disabled="
              !dynamicForm.id || (dynamicForm.id && dynamicForm.is_company)
                ? false
                : true
            "
            v-model="value"
            multiple
            filterable
            remote
            reserve-keyword
            :placeholder="'请选择' + (dyn_type == 1 ? '公司' : '员工')"
          >
            <el-option
              v-for="item in dyn_type === 1 ? base_company : base_staff"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面图" prop="cover">
          <lb-cover
            :fileList="dynamicForm.cover"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 686 * 400</lb-tool-tips>
        </el-form-item>
        <el-form-item label="跳转方式" prop="url_type">
          <el-radio-group v-model="dynamicForm.url_type">
            <el-radio :label="1">外部链接</el-radio>
            <el-radio :label="2">小程序</el-radio>
            <el-radio :label="3">拨打电话</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="跳转链接" prop="content">
          <el-input
            v-model="dynamicForm.content"
            placeholder="请输入跳转链接"
          ></el-input>
          <lb-tool-tips
            >小程序跳转链接输入格式如下:
            <div class="mt-md">
              1、跳转到小程序首页
              <div class="mt-md c-link">
                所需参数如下：
                <div class="mt-sm">[1] appId</div>
              </div>
              <div class="mt-md">例如：wx581f0c1732ae745f</div>
            </div>
            <div class="mt-lg">
              2、跳转到小程序指定页面
              <div class="mt-md c-link">
                所需参数如下：
                <div class="mt-sm">[1] appId</div>
                <div class="mt-sm">[2] ; (英文状态下的分号)</div>
                <div class="mt-sm">[3] 页面路径及参数</div>
              </div>
              <div class="mt-md">
                例如：wx581f0c1732ae745f;pages/user/home?key=1&staff_id=1
              </div>
            </div>
          </lb-tool-tips>
        </el-form-item>
        <el-form-item
          label="同步修改内容"
          prop="is_all"
          v-if="dynamicForm.id && dynamicForm.is_company"
        >
          <el-radio-group v-model="dynamicForm.is_all">
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >选择开启，将同步修改新增动态时生成的所有数据</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="dynamicForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item label="发布时间" prop="create_time">
          <el-date-picker
            :picker-options="pickerOptions"
            v-model="dynamicForm.create_time"
            type="datetime"
            value-format="timestamp"
            placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      tips: {
        1: `${this.$t('menu.Dynamic')}内容`,
        2: `请输入${this.$t('menu.Dynamic')}内容`
      },
      id: '',
      navTitle: '',
      options: [],
      value: [],
      loading: false,
      dyn_type: 1,
      cateList: [],
      base_company: [],
      base_staff: [],
      dynamicForm: {
        id: 0,
        type: 2,
        title: '',
        cate_id: '',
        cover: [],
        content: '',
        url_type: 1,
        top: '',
        is_company: 0,
        create_time: parseInt(
          new Date().getTime()
        ),
        is_all: 0
      },
      dynamicFormRules: {
        title: {
          required: true,
          type: 'string',
          message: '请输入标题',
          trigger: 'blur'
        },
        cate_id: {
          required: false,
          type: 'number',
          message: '请选择分类',
          trigger: 'blur'
        },
        cover: {
          required: true,
          type: 'array',
          message: '请上传图片',
          trigger: 'change'
        },
        content: {
          required: true,
          type: 'string',
          message: `请输入${this.$t('menu.Dynamic')}内容`,
          trigger: 'blur'
        },
        url_type: {
          required: true,
          type: 'number',
          message: '请选择类型',
          trigger: 'change'
        },
        top: {
          required: true,
          type: 'number',
          message: '请输入排序值',
          trigger: 'blur'
        },
        create_time: {
          required: true,
          type: 'number',
          message: '请选择时间',
          trigger: 'blur'
        },
        is_all: {
          required: true,
          type: 'number',
          message: '请选择',
          trigger: 'blur'
        }
      }
    }
  },
  async created () {
    let { id } = this.$route.query
    this.navTitle = this.$t(id ? 'menu.EditLink' : 'menu.AddLink')
    await this.getBaseInfo()
    if (id) {
      this.id = id
      this.getFormInfo(id)
    }
  },
  methods: {
    async getBaseInfo () {
      let [cate, company, staff] = await Promise.all([this.$api.dynamicCateSelect(), this.$api.getDynamicCompanyInfo(), this.$api.getDynamicStaffInfo()])
      this.cateList = cate.data
      this.base_company = company.data
      this.base_staff = staff.data
    },
    getFormInfo (id) {
      this.$api.getDynamicFormInfo({ id }).then(res => {
        if (res.code === 200) {
          this.dyn_type = res.data.user_id ? 2 : 1
          this.value = res.data.user_id ? [res.data.user_id] : [res.data.company_id]
          res.data.is_all = 0
          res.data.cover = [{ url: res.data.cover[0] }]
          res.data.create_time = res.data.create_time * 1000
          for (let key in this.dynamicForm) {
            this.dynamicForm[key] = res.data[key]
          }
        }
      })
    },
    getCover (img) {
      console.log(img)
      this.dynamicForm.cover = img
    },
    submitFormInfo () {
      this.$refs['dynamicForm'].validate(valid => {
        if (valid) {
          let subForm = JSON.parse(JSON.stringify(this.dynamicForm))
          subForm.cover = subForm.cover.map(item => {
            return item.url
          })
          subForm.create_time = subForm.create_time / 1000
          if (subForm.id && this.dyn_type === 1 && this.value.length < 1) {
            this.$message.error('请选择公司')
            return
          }

          if (this.dyn_type === 2 && this.value.length < 1) {
            this.$message.error('请选择员工')
            return
          }

          if (!subForm.id) {
            delete subForm.is_all
          }

          let result = subForm.id ? this.dyn_type === 1 ? 'company_id' : 'user_id' : this.dyn_type === 1 ? 'company' : 'staff'
          subForm[result] = this.value

          let methodModel = subForm.id ? 'modifyDynamicInfo' : 'addDynamicInfo'
          this.$api[methodModel](subForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
              this.goBack()
            }
          })
        }
      })
    },
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-dynamic-ordinary {
  width: 100%;
  .dynamic-form {
    width: 100%;
    .el-input,
    .el-input-number,
    .el-select {
      width: 300px;
    }
  }
}
</style>
